<mat-card>
  <mat-toolbar-row>
    <div class="toolbar-row-title">
      <a [ixTest]="['nvme-of', 'open-in-new']" [routerLink]="['/sharing', 'nvme-of']">
        <h3 class="card-title">
          {{ 'NVME-oF Subsystems' | translate }}
          <ix-icon name="open_in_new" class="title-icon"></ix-icon>
        </h3>
      </a>

      <ix-service-state-button
        [service]="service$ | async"
        [count]="+(dataProvider().currentPageCount$ | async)"
      ></ix-service-state-button>
    </div>

    <div class="actions">
      <button
        *ixRequiresRoles="requiredRoles"
        mat-button
        [ixTest]="['nvme-of-share', 'add']"
        [attr.aria-label]="'Add NVME-oF Share' | translate"
        (click)="openForm()"
      >
        {{ 'Add' | translate }}
      </button>

      <ix-service-extra-actions
        [service]="service$ | async"
        [requiredRoles]="requiredRoles"
      ></ix-service-extra-actions>
    </div>
  </mat-toolbar-row>

  <ix-table
    class="table"
    [ix-table-empty]="!(dataProvider().currentPageCount$ | async)"
    [emptyConfig]="emptyService.defaultEmptyConfig(dataProvider().emptyType$ | async)"
  >
    <thead
      ix-table-head
      [columns]="columns"
      [dataProvider]="dataProvider()"
    ></thead>
    <tbody
      ix-table-body
      [columns]="columns"
      [dataProvider]="dataProvider()"
      [isLoading]="!!(dataProvider().isLoading$ | async)"
    ></tbody>
  </ix-table>

  <ix-table-pager-show-more
    [pageSize]="4"
    [dataProvider]="dataProvider()"
    [ixTestOverride]="['nvme-of']"
    [routerLink]="['/sharing', 'nvme-of']"
  ></ix-table-pager-show-more>
</mat-card>
